<template>
    <div>
        <div class="first-floor" v-if="firstData">
            <div class="left">
                <!-- <img src="/images/index/01-first.png" alt=""> -->
                <img :src="require(`../../../../item-server/router/components/commodity/${firstData[5].img.split(',')[0]}`)" alt="">
                <div>
                    <h3>{{firstData[5].commodity}}</h3>
                    <span>From ${{firstData[5].price}}</span>
                    <a href="#" class="el-icon-right"></a>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <img src="/images/index/02-first.png" alt="">
                    <!-- <img :src="firstData[6].img" alt=""> -->
                    <div>
                        <h3>{{firstData[6].commodity}}</h3>
                        <span>From ${{firstData[6].price}}</span>
                        <a href="#" class="el-icon-right"></a>
                    </div>
                </div>
                <div class="right-bottom">
                    <img src="/images/index/03-first.png" alt="">
                    <!-- <img :src="firstData[7].img" alt=""> -->
                    <div>
                        <h3>{{firstData[7].commodity}}</h3>
                        <span>From ${{firstData[7].price}}</span>
                        <a href="#" class="el-icon-right"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="second-floor">
            <div class="top">
                <ul>
                    <li><button>精品上装</button></li>
                    <li><button>潮流下装</button></li>
                    <li><button>炫酷鞋子</button></li>
                    <li><button>精美饰品</button></li>
                </ul>
            </div>
            <div class="bottom">
                <div class="item">
                    <div class="up">
						<img src="/images/index/01-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/02-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/03-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/04-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/04-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/02-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/03-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
                <div class="item">
                    <div class="up">
						<img src="/images/index/04-second.png" alt="">
						<h4>Accessories</h4>
                        <span>$38.50</span>
					</div>
					<div class="down">
                        <ul>
                            <li class="el-icon-shopping-cart-2"></li>
                            <li class="el-icon-document"></li>
                            <li class="el-icon-shopping-bag-1"></li>
                        </ul>
					</div>
                </div>
            </div>
        </div>
        <div class="third-floor">
            <div class="main">
                <div>
                    <h2>潮流前沿</h2>
                </div>
                <div><span>最时尚的靓仔</span></div>
                <div><button>查看详情</button></div>
            </div>
        </div>
        <div class="forth-floor" v-if="firstData">
            <div><h1>Fatiom 套装</h1></div>
            <div class="main">
                <div class="left">
                    <img src="/images/index/01-forth.jpg" alt="">
                </div>
                <div class="right">
                    <div class="right-main">
                        <img :src="require(`../../../../item-server/router/components/commodity/${firstData[4].img.split(',')[0]}`)" alt="">
                        <button>查看详情</button>
                    </div>
                    <div class="right-main">
                        <img :src="require(`../../../../item-server/router/components/commodity/${firstData[5].img.split(',')[0]}`)" alt="">
                        <button>查看详情</button>
                    </div>
                    <div class="right-main">
                        <img :src="require(`../../../../item-server/router/components/commodity/${firstData[6].img.split(',')[0]}`)" alt="">
                        <button>查看详情</button>
                    </div>
                    <div class="right-main">
                        <img :src="require(`../../../../item-server/router/components/commodity/${firstData[7].img.split(',')[0]}`)" alt="">
                        <button>查看详情</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="fifth-floor">
            <div class="top"><h2>合作伙伴</h2></div>
            <div class="area">
					<!-- 移动的是这个列表标签，带动所有的小块一起 -->
					<ul>
						<!-- 一组图片内容 -->
						<li>
							<img src="/images/index/01-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/02-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/03-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/04-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/01-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/02-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/03-fifth.png" alt="">
						</li>
                        <li>
							<img src="/images/index/04-fifth.png" alt="">
						</li>
					</ul>
			</div>
        </div>
        <!-- <div class="sixth-floor"></div>
        <div class="seventh-floor"></div> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                firstData: '',
            }
        },
        mounted() {
            this.getFirst();
        },
        methods: {
            getFirst() {
                let url = 'http://localhost:8000/goods/first';
                this.axios.get(url).then((res)=>{
                    console.log('商品数据：',res);
                    this.firstData = res.data;
                });
            }

        },
    }
</script>
<style scoped src="../../assets/css/index.css"></style>
<style lang="scss" scoped>

</style>